import {Canvas, Meta, Story} from '@storybook/blocks'

import * as BoxOverlayStories from './BoxOverlay.stories'

<Meta of={BoxOverlayStories} />

# BoxOverlay

Use the `Box--overlay` with the `<details>` and [`<details-dialog>`](https://github.com/github/details-dialog), and add the `details-overlay-dark` utility if you wish to apply a dark transparent background.

Box overlays come in three widths. The default `Box--overlay` is 440px wide, `Box-overlay--narrow` is 320px wide, and `Box-overlay--wide` is 640px wide.

See [aria attributes](https://www.w3.org/TR/html-aria/#allowed-aria-roles-states-and-properties)

<Canvas of={BoxOverlayStories.Default} />
